<template>
        <div class="login-css">
          <div class="center">
            <div class="left">
              <div class="left-1">Welcome!</div>
              <div class="left-2">考培易在线考试与学习系统独立版</div>
            </div>
            <div class="right">
              <div class="login-center" style="height: 30px;">
                <div style="position: absolute;left: 5%;width: 420px;margin-left: 55px;font-size: 15px;color: #0076ca;text-align: center;">
                  (测试账号：test   测试密码：123456)
                </div>
              </div>
              <div class="login-center">
                <div class="login-box" >

                  <div v-show="!zhaoHuiMima" class="tab-box">
                    <div class="tab-item" v-for="(item,index) in selectList" :class="item.addClass"
                      @click="selectIndex(index)" :key="index">{{item.name}}</div>
                  </div>

                  <div v-show="zhaoHuiMima" class="tab-box" style="text-align: center;">
                    <div class="tab-item">重置密码</div>
                  </div>
                  <!-- 登录框 -->
                  <div v-show="selectActive==0 && !zhaoHuiMima">
                    <div class="input-box">
                      <i class="iconfont iconphone"></i>
                      <el-input maxlength="11" show-word-limit  v-model="user" placeholder="账号" class="main-text"></el-input>
                    </div>

                    <div class="input-box">
                      <i class="iconfont iconpassword"></i>
                      <el-input maxlength="32" @keyup.enter.native="save" v-model="password" placeholder="请输入密码" type="password" class="main-text"></el-input>
                    </div>
                    <identify @mousedownFn="getIdentifyCode"></identify>
                    <div class="submit" @click="save" v-show="!load1">立即登录</div>
                    <div class="submit" v-show="load1">登录中...</div>
                    <div @click="zhaoHuiMima=true"
                      style="line-height: 30px; width:100%;height:30px;font-size:14px;color:#0076CA;margin-top: 5px;cursor: pointer;">>>找回密码
                    </div>
                  </div>

                  <!-- 注册框 -->
                  <div v-show="selectActive==1 && !zhaoHuiMima">
                    <div class="input-box">
                      <i class="iconfont iconphone"></i>
                      <el-input maxlength="11" show-word-limit v-model="user1" placeholder="手机号" class="main-text"></el-input>
                    </div>
                    <div class="input-box">
                      <i class="iconfont iconxingming"></i>
                      <el-input maxlength="15" show-word-limit v-model="userName" placeholder="姓名" class="main-text"></el-input>
                    </div>
                    <div class="input-box">
                      <i class="iconfont iconpassword"></i>
                      <el-input  v-model="password2" type="password" maxlength="30" placeholder="请输入密码" class="main-text">
                      </el-input>
                    </div>
                    <div class="input-box">
                      <i class="iconfont iconpassword"></i>
                      <el-input  v-model="secondPassword" type="password" maxlength="30" placeholder="请再次输入密码" class="main-text">
                      </el-input>
                    </div>
                    <div class="code-box" style="width:100%">
                      <div class="input-box" style="width:calc(100% - 120px);float:left;margin-bottom: 10px;">
                        <i class="iconfont iconyanzhengma"></i>
                        <el-input @keyup.enter.native="reg" v-model="code" placeholder="验证码" class="main-text"></el-input>
                      </div>
                      <div class="getCode" v-show="show" @click="getCode">获取验证码</div>
                      <div class="getCode" v-show="!show">{{countMes}}</div>
                    </div>
                    <div style="float: left;" class="submit" @click="reg" v-show="!load2">立即注册</div>
                    <!-- <div style="float: left;cursor:not-allowed;" class="submit" v-show="!load2 && !isXiyi">立即注册</div> -->
                    <div class="submit" v-show="load2">正在注册...</div>
                    <!-- <div v-show="message!=''">{{message}}</div> -->
                  </div>

                  <!-- 重置密码框 -->
                  <div v-show="zhaoHuiMima">
                    <div class="input-box">
                      <i class="iconfont iconphone"></i>
                      <el-input maxlength="11" show-word-limit v-model="user_zhaomima" placeholder="手机号" class="main-text"></el-input>
                    </div>
                    <div class="input-box">
                      <i class="iconfont iconpassword"></i>
                      <el-input maxlength="30" v-model="new_password" placeholder="请输入密码" type="password" class="main-text"></el-input>
                    </div>
                    <div class="input-box">
                      <i class="iconfont iconpassword"></i>
                      <el-input maxlength="30" v-model="new_password2" placeholder="请再次输入密码" type="password" class="main-text"></el-input>
                    </div>
                    <div class="code-box" style="width:100%;">
                      <div class="input-box" style="width:calc(100% - 120px);float:left;">
                        <i class="iconfont iconyanzhengma"></i>
                        <el-input v-model="code1" placeholder="验证码" class="main-text"></el-input>
                      </div>
                      <div class="getCode" v-show="show1" @click="getCode1">获取验证码</div>
                      <div class="getCode" v-show="!show1">{{countMes1}}</div>
                      <div style="clear:both"></div>
                    </div>
                    <div style="width:100%;height:45px;font-size:14px;color:#666666">请使用短信验证码</div>
                    <div class="submit" @click="chongzhimima" v-show="!load1">立即重置</div>
                    <div class="submit" v-show="load1">重置中...</div>
                     <div @click="zhaoHuiMima=false"
                       style="line-height: 30px; width:100%;height:30px;font-size:14px;color:#0076CA;margin-top: 5px;cursor: pointer;">>>返回登录
                     </div>
                  </div>

                </div>
                <!-- <img src="../../static/image/body-bg.png"  alt class="login-img" /> -->
              </div>
            </div>

          </div>
       </div>
</template>

<script>
  import {
    Notification
  } from 'element-ui';
  import Cookies from 'js-cookie'
  import '@/assets/css/fonts2/iconfont.css'
  // import BL from '../plugins/bianliangming.js'
  import identify from '../../components/identifyCode.vue'
  import CryptoJS from 'crypto-js'

  // 加密所需的key
  const KEY = '26c4c96764ad2319fdd3154f3fe6c4e5'

  // DES加密
  export const encryptDes = (msg) => {
    var keyHex = CryptoJS.enc.Utf8.parse(KEY)
    var option = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
    var encrypted = CryptoJS.AES.encrypt(msg, keyHex, option)
    return encrypted.ciphertext.toString()
  }

  // DES解密
  export const decryptDes = (msg) => {
    var keyHex = CryptoJS.enc.Utf8.parse(KEY)
    var decrypted = CryptoJS.AES.decrypt(
      {
        ciphertext: CryptoJS.enc.Utf8.parse(msg)
      },
      keyHex,
      {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      }
    )
    return decrypted.toString(CryptoJS.enc.Utf8)
  }
  export default {
    components: {
      identify
    },

    data() {
      return {
        dialogTableVisible:false,
        isXiyi:false,
        new_password: '',
        new_password2:'',
        zhaoHuiMima: false,
        user_zhaomima: '',
        userName: '',
        password2: '',
        secondPassword:'',
        drawer: false,
        list: [{
            addClass: 'fadeIn',
            name: '培训'
          },
          {
            addClass: '',
            name: '考试'
          },
          {
            addClass: '',
            name: '测评'
          },
        ],
        load1: false,
        load2: false,

        timer: null,
        active: 0,
        addClass: '',
        selectActive: 0,

        user: '',
        password: '',
        user1: '',
        code: '',
        text: '学生登录',
        type: '',
        checked: false,
        show: true,
        count: "",
        countMes: "",
        timer: null,
        code1: '',
        show1: true,
        count1: "",
        countMes1: "",
        timer1: null,
        selectList: [{
            name: '登陆',
            addClass: 'active'
          },
          {
            name: '注册',
            addClass: ''
          },
        ],
        audio: {},
        message: '',
        windowWidth:null,
        isPhone:false,
        type:'',
        IdentifyCode:false,//未验证默认为false
      }
    },
    created() {
    },
    watch: {
        '$route': function (newVal, oldVal) {
          if(newVal.query.type == "register"){
            this.selectActive = 1;
                this.selectList[0].addClass = '';
                this.selectList[1].addClass = 'active';
          }
          if(newVal.query.type == "login"){
                this.selectActive = 0;
                this.selectList[0].addClass = 'active';
                this.selectList[1].addClass = '';
          }
         }
    },
    mounted() {
      this.type = this.$route.query.type;
      if (this.type == 'register') {
          this.selectActive = 1;
          this.selectList[0].addClass = '';
          this.selectList[1].addClass = 'active';
        }
        if (this.type == 'login') {
          this.selectActive = 0;
          this.selectList[0].addClass = 'active';
          this.selectList[1].addClass = '';
        }
    },
    methods: {
      //获取验证是否成功
      getIdentifyCode(e){
        this.IdentifyCode = e
      },
      //重置密码
      chongzhimima() {
        let that = this;
        if (this.user_zhaomima == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          });
          return;
        } else if (!(/^1[3456789]\d{9}$/.test(this.user_zhaomima))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          });
          return;
        } else if (this.new_password == "") {
          Notification.warning({
            title: '提示',
            message: "请输入密码"
          });
          return;
        }
        else if (!(/^(?=.*[a-zA-z].*)(?=.*[\d].*).{8,30}$/.test(this.new_password))) {
          Notification.warning({
            title: '提示',
            message: "密码设置，为8-30位，字母+数字"
          });
          return;
        }else if(this.new_password2 != this.new_password){
          Notification.warning({
            title: '提示',
            message: "两次输入密码不一致"
          });
          return;
        }
        else if (this.code1 == "") {
          Notification.warning({
            title: '提示',
            message: "请输入短信验证码"
          });
          return;
        }
        this.new_password = encryptDes(this.new_password)
        this.new_password2 = encryptDes(this.new_password2)
        let url = '/f/userResetPassword?mobile='
        this.load1 = true;
        this.$axios.$get(url + this.user_zhaomima +"&password="+this.new_password + "&newPassword=" + this.new_password2 +
          "&mobileCode=" + this.code1).then(function(response) {

          //该用户未注册则提示
          Notification.success({
            title: '提示',
            message: "该手机号暂未注册"
          });
          //重置成功返回到登录界面
          Notification.success({
            title: '提示',
            message: "重置密码成功"
          });
          that.user_zhaomima='';
          that.new_password='';
          that.new_password2='';
          that.code1 = '';
          that.selectActive = 0;
          that.zhaoHuiMima = false;

          that.load1 = false;
        }).catch(function(error) {
          console.log(error);
          that.load1 = false;
        })
      },
      goRegister() {
        this.$router.push({
          path: '/login',
          query: {
            type: 'register'
          }
        })
      },
      selectIndex(index) {
        this.selectActive = index
        this.selectList.forEach((item, i) => {
          if (i == index) {
            item.addClass = "active";
          } else {
            item.addClass = "";
          }
        })
      },
      getCode1() {
        var that = this;
        if (this.user_zhaomima == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          })
        } else if (!(/^1[3456789]\d{9}$/.test(this.user_zhaomima))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          })
        } else {
          let TIME_COUNT = 60;
          that.countMes1 = "60S"
          if (!that.timer) {
            console.log(666)
            that.count1 = TIME_COUNT;
            that.show1 = false;
            that.timer1 = setInterval(() => {
              if (that.count1 > 0 && that.count1 <= TIME_COUNT) {
                that.count1--;
                var countMes1 = that.count1 + "S";
                that.countMes1 = countMes1;
              } else {
                that.show1 = true;
                clearInterval(that.timer1);
                that.timer1 = null;
              }
            }, 1000)
          }
          let url22 = '/f/getMobileValidate?mobile='
          this.$axios.$get(url22 + this.user_zhaomima + "&templateId=ZHMM_MOULD_ID")
            .then(function(response) {
              Notification.success({
                title: '提示',
                message: "短信已发送"
              })

            })
            .catch(function(error) {
              that.show = true;
              clearInterval(that.timer);
              that.timer = null;
              console.log(error);
            })
        }

      },

      //获取重置密码功能的验证码
      getCode() {
        var that = this;
        if (this.user1 == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          })
        } else if (!(/^1[3456789]\d{9}$/.test(this.user1))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          })
        } else {
          let TIME_COUNT = 60;
          that.countMes = "60S"
          if (!that.timer) {
            console.log(666)
            that.count = TIME_COUNT;
            that.show = false;
            that.timer = setInterval(() => {
              if (that.count > 0 && that.count <= TIME_COUNT) {
                that.count--;
                var countMes = that.count + "S";
                that.countMes = countMes;
              } else {
                that.show = true;
                clearInterval(that.timer);
                that.timer = null;
              }
            }, 1000)
          }
          let url11 = '/f/getMobileValidate?mobile='
          this.$axios.$get(url11 + this.user1 +"&templateId=ZCYZ_MOULD_ID").then(function(response) {
            Notification.success({
              title: '提示',
              message: "短信已发送"
            })
          }).catch(function(error) {
            that.show = true;
            clearInterval(that.timer);
            that.timer = null;
            console.log(error);
          })
        }

      },
      select(index) {
        this.menuList.forEach((item, i) => {
          if (i == index) {
            item.addClass = "active"
          } else {
            item.addClass = ""
          }
        })
      },
      //登录
      save() {
        let that = this;

        if (this.user == "") {
          Notification.warning({
            title: '提示',
            message: "请输入账号"
          });
          return;
        }
        //  else if (!(/^1[3456789]\d{9}$/.test(this.user))) {
        //   Notification.warning({
        //     title: '提示',
        //     message: "请输入正确的手机号"
        //   });
        //   return;
        // }
        else if (this.password == "") {
          Notification.warning({
            title: '提示',
            message: "请输入密码"
          });
          return;
        }
        else if(!this.IdentifyCode){
          Notification.warning({
            title: '提示',
            message: "请通过验证"
          });
          return;
        }
        this.password = encryptDes(this.password)
        let url = "/f/login";
        this.$axios.$get(url + "?loginName=" + this.user + "&password=" + this.password).then(function(response) {
            let obj = response.data.educationUser;
            Cookies.set("userData", JSON.stringify(obj));
            Cookies.set("sysType",'study')
            if (that.checked) {
              Cookies.set("mobile", that.user, {
                expires: 7
              });
              Cookies.set("password", that.password, {
                expires: 7
              });
              Cookies.set("remember", "yes", {
                expires: 7
              });
            }
            Cookies.set("token", response.data.token, {
              expires: 1
            });
            that.login = false;
            //Cookies.set("login","yes",{ expires: 1 });
            // that.$router.push("/home");
            if(that.$route.query.go == 0){
              that.$router.push("/home");
            }else{
              that.$router.go(-1);
            }
            //that.$emit("loginOut",true);
            that.$emit("loginAfter");
        }).catch(function(error) {
          console.log(error);
        })
      },
      //注册
      reg() {

        let that = this;
        if (this.user1 == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          });
          return;
        } else if (!(/^1[3456789]\d{9}$/.test(this.user1))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          });
          return;
        } else if (this.userName == "") {
          Notification.warning({
            title: '提示',
            message: "请输入姓名"
          });
          return;
        } else if (this.password2 == "") {
          Notification.warning({
            title: '提示',
            message: "请输入密码"
          });
          return;
        } else if (!(/^(?=.*[a-zA-z].*)(?=.*[\d].*).{8,30}$/.test(this.password2))) {
          Notification.warning({
            title: '提示',
            message: "密码设置，为8-30位，字母+数字"
          });
          return;
        } else if(this.secondPassword != this.password2){
          Notification.warning({
            title: '提示',
            message: "两次输入的密码不一致，请重新输入！"
          });
          this.secondPassword == '';
          return;
        }
        else if (this.code == "") {
          Notification.warning({
            title: '提示',
            message: "请输入验证码"
          });
          return;
        }
        let url = "/f/register";
        that.load2 = true;
        // var obj={

        // };
        this.password2 = encryptDes(this.password2)
        this.$axios.$get(url + "?mobile=" + this.user1 + "&name=" + this.userName + "&mobileCode=" + this.code +
          "&password=" + this.password2).then(response => {
          Notification.success({
            title: '提示',
            message: "恭喜您注册成功"
          });
          that.user1='';
          that.userName='';
          that.code = '';
          that.password2 = '';
          that.secondPassword = '';
          // that.selectActive = 0;
          that.load2 = false;
          // that.$router.push("/login");
          that.selectIndex(0)
          // that.$router.push({
          //   path: '/login',
          //   query: {
          //     type: 'login'
          //   }
          // })

        }).catch(function(error) {
          that.load2 = false;
        })
      },
      goPage(url) {
        this.$router.push(url)
      },
      handleScroll: function() {

        var scrollTop = $('.login-page').scrollTop();
        //console.log(scrollTop)
        if (scrollTop > 60) {
          this.addClass = "animated fadeInDown"
        } else {
          this.addClass = ""
        }
      },
      select(index) {
        this.active = index;
        this.list.forEach((item, i) => {
          if (i == index) {
            item.addClass = "fadeIn"
          } else {
            item.addClass = ""
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .login-css{
    position: relative;
    width: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 1250px;
    background-image: url('../../static/image/login-background.png');
    .center{
      width: 1250px;
      height: 600px;
      display: flex;
      -webkit-box-shadow: 0 0 20px  #00000033;
      box-shadow: 0 0 20px  #00000033;
      border-radius: 12px;
      .left{
        width: 634px;
        max-width: 634px;
        min-width: 634px;
        height: 600px;
        background-size: 634px 600px;
        color: #fff;
        padding-left: 40px;
        padding-top: 130px;
        border-bottom-left-radius: 12px;
        border-top-left-radius: 12px;
        background-image: url('../../static/image/login-left-bg.png');
        .left-1{
          font-size: 54px;
        }
        .left-2{
          font-size: 30px;
          width: 450px;
          border-bottom: 1px solid hsla(0,0%,100%,.8);
          line-height: 48px;
        }
      }
      .right{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
        .login-center {
          width: 100%;
          height: 470px;
          margin: 0 auto;
          position: relative;
          // top: 65px;


          // .login-img {
          //   width: 450px;
          //   display: block;
          //   position: absolute;
          //   top: 50%;
          //   transform: translateY(-50%);
          //   right: 5%;
          // }

          .right-box {
            float: right;
            width: calc(100% - 650px);
            padding-top: 60px;
            display: none;

            .typeText {
              line-height: 40px;
              font-size: 30px;
              color: #ffffff;
              display: block;
              margin-bottom: 40px;
            }

            .content {
              width: 100%;
              line-height: 50px;
              color: #ffffff;
              font-size: 36px;
            }

            .text {
              line-height: 30px;
              margin: 20px 0;
              font-size: 16px;
              color: #ffffff;
            }

            .sign {
              width: 170px;
              height: 50px;
              border-radius: 5px;
              border: 1px solid #fff;
              line-height: 48px;
              text-align: center;
              font-size: 16px;
              color: #ffffff;
              cursor: pointer;
            }
          }
          .login-box {
            width: 420px;
            // box-shadow: 0 4px 10px #dadada;
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 60px;
            background: #ffffff;
            border-radius: 5px;
            padding: 10px 40px;
            margin-top: 0px !important;
            box-sizing: border-box;

            .tab-box {
              width: 100%;
              box-sizing: border-box;
              padding: 0 40px;
              margin-bottom: 20px;

              .tab-item {
                width: 50%;
                display: inline-block;
                line-height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 18px;
                color: #0076ca;
                cursor: pointer;
              }

              .active {
                position: relative;
              }

              .active:after {
                content: "";
                position: absolute;
                left: 20%;
                width: 60%;
                height: 3px;
                border-radius: 3px;
                bottom: -4px;
                background: #0076ca;
              }
            }

            .work {
              width: 100%;
              margin-top: 20px;
              border-top: 1px solid #ededed;
              float: left;
              padding-top: 30px;

              .text {
                line-height: 30px;
                height: 30px;
                width: 100%;
                display: block;
                font-size: 14px;
                color: #cccccc;
              }

              .work-content {
                width: 100%;
                margin-top: 15px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .iconfont {
                  width: 25px;
                  height: 25px;
                  text-align: center;
                  line-height: 25px;
                  border-radius: 50%;
                  color: #ffffff;
                  font-size: 16px;
                }

                .iconweixin {
                  background: #52c431;
                }
              }
            }
            .xieyi{
              width: 100%;
              display: flex;
              .el-checkbox{
                width: 20px;
                height: 20px;
                line-height: 20px;
                float: none;
                margin-top: 0;
                margin-bottom: 10px;
              }
            }
            .submit {
              width: 100%;
              height: 45px;
              border-radius: 5px;
              line-height: 45px;
              text-align: center;
              font-size: 18px;
              color: #ffffff;
              background: #0076ca;
              // float: left;
              cursor: pointer;
            }

            .el-checkbox {
              width: 50%;
              line-height: 1.5rem;
              margin-top: 10px;
              margin-right: 0;
              float: left;
              margin-bottom: 2.5rem;
              text-align: left;
            }

            .back-password {
              line-height: 1.5rem;
              margin-top: 10px;
              text-decoration: none;
              color: #606266;
              font-size: 14px;
              text-align: right;
              width: 50%;
              display: block;
              float: left;
              margin-bottom: 2.5rem;
            }

            .getCode {
              width: 110px;
              height: 45px;
              text-align: center;
              line-height: 45px;
              cursor: pointer;
              border-radius: 5px;
              background: #0076ca;
              font-size: 14px;
              color: #fff;
              margin-left: 10px;
              float: left;
            }

            .input-box {
              width: 100%;
              height: 45px;
              // box-sizing: border-box;
              border: 1px solid #e2e2e2;
              overflow: hidden;
              border-radius: 5px;
              margin-bottom: 20px;
              .main-text {
                width: calc(100% - 50px);
                height: 43px;
                line-height: 43px;
                float: left;
                // border: 0px solid #000000;
                ::v-deep .el-input__inner {
                    -webkit-appearance: none;
                    background-color: #fff;
                    background-image: none;
                    border-radius: 4px;
                    border: 0px solid #dcdfe6 !important;
                    box-sizing: border-box;
                    color: #606266;
                    display: inline-block;
                    font-size: inherit;
                    height: 40px;
                    line-height: 40px;
                    outline: 0;
                    padding: 0 15px;
                    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                    width: 100%;
                }
              }

              .iconfont {
                display: block;
                width: 50px;
                height: 43px;
                line-height: 43px;
                text-align: center;
                color: #cccccc;
                font-size: 20px;
                float: left;
              }
            }
          }
        }
      }
    }

}
</style>
